<template>
    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="auto" :size="formSize" status-icon >
        <el-descriptions :column="2" border >
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">负责人</div>
                </template>
                <el-form-item prop="user_id">
                    <component :is="userSelect" :data=ruleForm.user_id :role_type="1" @onUserSelect="onUserSelect" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">施工地点</div>
                </template>
                <el-form-item prop="address">
                    <el-input v-model="ruleForm.address" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">金额</div>
                </template>
                <el-form-item prop="price">
                    <el-input v-model="ruleForm.price" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">施工范围</div>
                </template>
                <el-form-item prop="range">
                    <el-input v-model="ruleForm.range" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">承包方式</div>
                </template>
                <el-form-item prop="type">
                    <el-input v-model="ruleForm.type" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">乙方联系方式</div>
                </template>
                <el-form-item prop="b_mobile">
                    <el-input v-model="ruleForm.b_mobile" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">乙方人员</div>
                </template>
                <el-form-item prop="b_name">
                    <el-input v-model="ruleForm.b_name" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">开始日期</div>
                </template>
                <el-form-item prop="start_date">
                    <el-date-picker v-model="ruleForm.start_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%;" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">结束日期</div>
                </template>
                <el-form-item prop="end_date">
                    <el-date-picker v-model="ruleForm.end_date" type="date" value-format="YYYY-MM-DD" placeholder="请选择日期" style="width: 100%;" />
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">合同文件</div>
                </template>
                <el-form-item prop="title">
                    <el-button link type="primary" @click="onUpload" size="small">{{ ruleForm.file ? '查看' : '上传' }}</el-button>
                </el-form-item>
            </el-descriptions-item>
            <el-descriptions-item>
                <template #label>
                    <div class="cell-item">备注</div>
                </template>
                <el-form-item prop="remarks">
                    <el-input v-model="ruleForm.remarks" type="textarea" :autosize="{ minRows: 4 }" />
                </el-form-item>
            </el-descriptions-item>
        </el-descriptions>
    </el-form>
    <el-divider />
    <div class="text-center">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
        <el-button type="info" @click="router.go(-1)"> 返回 </el-button>
        <component :is="applyButton" model = "Labor" source = "Labor" type = "apply" :id = id />
        <component :is="applyRevoke" model = "Labor" source = "Labor" :id = id />
    </div>

    <el-dialog v-model="showUpload" title="文件">
        <component :is="upload" :data="uploadData" @saveUpload="saveUpload" />
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage, type ComponentSize, type FormInstance, type FormRules } from 'element-plus'
import { useRouter } from 'vue-router';
import http from '../../../util/request';
import userSelect from "@/components/userSelect.vue";
import upload from '@/components/upload.vue'
import router from '../../../router';
import applyButton from "@/components/applyButton.vue";
import applyRevoke from "@/components/applyRevoke.vue";
const loading = ref<boolean>(false)
const id:any = ref(useRouter().currentRoute.value.params.id)
const showUpload = ref<boolean>(false)
let uploadData:any = ref({prefix:'labor/'})

interface RuleForm {
    id:number
    project_id:number
    price:number
    start_date: string
    end_date: string
    user_id:number
    range: string
    address: string
    type: string
    b_mobile: string
    b_name: string
    file: string
    remarks: string
}

const formSize = ref<ComponentSize>('large')
const ruleFormRef = ref<FormInstance>()
const ruleForm = ref<RuleForm>({
    id:0,
    project_id:0,
    price:0,
    start_date: '',
    end_date: '',
    user_id:0,
    range: '/',
    type: '/',
    address: '/',
    b_mobile: '/',
    b_name: '/',
    file: '',
    remarks: '/',
})


const getData = () => {
    if(id.value == 0){
        return;
    }
    http.get('/labor/'+id.value).then((response:any)=>{
        ruleForm.value = response.data.data
    })
}

const rules = reactive<FormRules<RuleForm>>({
    range: [
        { required: true, message: '请输入施工范围', trigger: 'blur' },
    ],
    address: [
        { required: true, message: '请输入施工地点', trigger: 'blur' },
    ],
    type: [
        { required: true, message: '请输入承包方式', trigger: 'blur' },
    ],
    start_date: [
        { required: true, message: '请选择开始日期', trigger: 'blur' },
    ],
    end_date: [
        { required: true, message: '请选择结束日期', trigger: 'blur' },
    ],
    b_name: [
        { required: true, message: '请输入乙方人员', trigger: 'blur' },
    ],
    b_mobile: [
        { required: true, message: '请输入乙方联系方式', trigger: 'blur' },
    ]
})

const submitForm = async (formEl: FormInstance | undefined) => {
    console.log(ruleForm.value)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            if(ruleForm.value.id){
                request = http.patch('/labor',ruleForm.value)
            }else{
                request = http.put('/labor',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                id.value = response.data.data.id
                getData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}


const onUserSelect = (data:number) => {
    ruleForm.value.user_id = data
}

onMounted(()=>{
    getData()
})

const onUpload = () => {
    uploadData.value.id = id.value
    uploadData.value.image = ruleForm.value.file
    uploadData.value.ratio = ''
    showUpload.value = true
}

const saveUpload = (data:string) => {
    ruleForm.value.file = data
    showUpload.value = false
}
</script>
<style scoped>
.el-form{margin:0px auto;width: 1200px;height: calc(100vh - 25vh);overflow-y: scroll;}
::v-deep .el-form-item .el-form-item__label {
  font-size: 16px; /* 或者你想要的任何大小 */
}
.cell-item{font-size: 16px;}
.el-form-item{margin-top: 0px;margin-bottom: 8px;}
::v-deep .el-tabs__item{font-size: 18px !important;}
</style>
